<template>
  <div style="width: 600px">
    <div class="filter">
      <div class="uploadBtn">
        <el-button
          @click="modelDownload()"
          size="large"
          type="default"
          style=""
          :icon="Download"
          >大屏数据模版下载</el-button
        >
      </div>
    </div>
    <el-upload
      drag
      action="#"
      :http-request="dailyExcelImport"
      :on-change="handleChange"
      :file-list="fileList"
      v-model="uploadList"
      accept=".xlsx,.xls"
      :on-success="
        (res) => {
          return handleExcelImportSuccess(res);
        }
      "
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽到这里 或者 <em>点击这里</em> 上传</div>
      <template #tip>
        <div class="el-upload__tip" style="line-height: 2">
          文件格式：.xlsx、.xls
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from "vue";
import { UploadFilled, Download } from "@element-plus/icons-vue";
import uploadHttp from "@/https/upload.js";
import { ElMessage } from "element-plus";

const fileList = ref([]);
const uploadList = ref([]);
const handleChange = (file, fileList) => {
  console.log(file, fileList);
  uploadList.value = fileList;
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
};

const dailyExcelImport = (params) => {
  console.log(params);
  let dataObj = {
    file: params.file,
  };
  uploadHttp.importAll(dataObj).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      ElMessage({
        message: "上传成功",
        type: "success",
      });
    } else {
      fileList.value = [];
      ElMessage({
        message: "上传失败,请重新上传",
        type: "error",
      });
    }
  });
};

const modelDownload = () => {
  uploadHttp.dowmloadVisualScreen().then((response) => {
    console.log(response);
    const content = response.data;
    const blob = new Blob([content], { type: "application/ms-excel" });
    let fileName = "大屏数据模版.xls";
    if ("download" in document.createElement("a")) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  });
};
</script>

<style scoped lang="less">
.waterYield {
  background: #fff;
  height: 100%;
}

.filter {
  display: flex;
  flex-direction: row;
}

.uploadBtn {
  text-align: left;
  margin-bottom: 40rem;
  margin-right: 20rem;
}
</style>
